<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>造五PVP属性效果计算器</title>
	</head>
	<style>
		header {
			height: 30px;
			width: 500px;
			display: flex;
		}

		.btn {
			width: 75px;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 2px;
			cursor: pointer;
			user-select: none;
			letter-spacing: 1px;
			text-indent: 1px;
			border-radius: 7px;
			box-sizing: border-box;
		}

		.three-d {
			color: #fff;
			background-color: #f1c40f;
			text-shadow: -2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0);
			box-shadow: -1px 3px 0px 0px #f39c12;
			transition: all .5s;
		}

		.three-d:hover {
			background-color: #fcdc5e;
		}

		.three-d:active {
			transform: translate(0, 4px);
			box-shadow: 0px 1px 0px 0px #f39c12;
		}

		span {
			color: rgb(255, 255, 51);
			font-weight: 600;
			line-height: 30px;
		}

		.span {
			width: 500px;
			color: rgb(255, 255, 51);
			font-weight: 600;
			line-height: 30px;
			margin-left: 13px;
		}

		input {
			color: #000;
			width: 35px;
			font-weight: 600;

		}

		body {
			margin-top: 30px;
			width: 800px;
			margin: auto;
			background-image: url(https://vedio.5054399.com/video/zmxy5/kaishibajie001.jpg);
		}

		.bute {
			width: 800px;
			height: 235px;
		}

		.line {
			display: flex;
		}

		.lines {
			display: flex;
		}

		.ate {
			background-color: rgb(220, 173, 142);
			color: rgb(95, 30, 5);
			font-weight: 600;
			border: 0px;
			width: 146px;
		}

		.attribute {
			width: 240px;
			height: 30px;
			border: 10px;
			background-color: rgb(220, 173, 142);
			border-radius: 5px;
			margin: 3px;
			padding-left: 10px;
		}

		.attributes {
			width: 240px;
			height: 30px;
			border: 10px;
			background-color: rgb(220, 173, 142);
			border-radius: 5px;
			margin: 3px;
			padding-left: 10px;
		}

		footer {
			margin-top: 95px;
			margin-right: 196px;
			text-align: center;
			color: rgb(255, 255, 51);
			font-weight: 600;
			line-height: 30px;
		}

		a,
		a:link,
		a:visited,
		a:hover,
		a:active {
			text-decoration: none;
			color: inherit;
			color: rgb(255, 255, 51);
			font-weight: 600;
		}

		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none !important;
		}

		input[type='number'] {
			-moz-appearance: textfield;
		}
	</style>
	<body>
		<header>
			<div class="span">等级：
				<input type="number" class="grade" placeholder="0">
				抗值：<span class="resistance"></span>
			</div>
			<div class="span">等级：
				<input type="number" class="grades" placeholder="0">
				抗值：<span class="resistances"></span>
			</div>
		</header>
		<div class="bute">
			<div class="line">
				<div class="attribute">
					<span>己方暴击:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attribute">
					<span>敌方韧性:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attributes">
					<span>己方暴击率:</span>
					<input type="text" class="ate crits" placeholder="0%">
				</div>
			</div>
			<div class="line">
				<div class="attribute">
					<span>己方幸运:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attribute">
					<span>敌方守护:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attributes">
					<span>己方幸运率:</span>
					<input type="text" class="ate " placeholder="0%">
				</div>
			</div>
			<div class="line reverse">
				<div class="attribute">
					<span>己方韧性:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attribute">
					<span>敌方暴击:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attributes">
					<span>敌方暴击率:</span>
					<input type="text" class="ate crit" placeholder="0%">
				</div>
			</div>
			<div class="line reverse">
				<div class="attribute">
					<span>己方守护:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attribute">
					<span>敌方幸运:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attributes">
					<span>敌方幸运率:</span>
					<input type="text" class="ate" placeholder="0%">
				</div>
			</div>
			<div class="lines">
				<div class="attribute">
					<span>己方闪避:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attribute">
					<span>敌方命中:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attributes">
					<span>己方闪避率:</span>
					<input type="text" class="ate miss" placeholder="0%">
				</div>
			</div>
			<div class="lines">
				<div class="attribute">
					<span>己方命中:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attribute">
					<span>敌方闪避:</span>
					<input type="number" class="ate" placeholder="0">
				</div>
				<div class="attributes">
					<span>己方命中率:</span>
					<input type="text" class="ate hit" value="100%">
				</div>
			</div>
		</div>
		<div class="bute">
			<button class="btn three-d increase">计算</button>
			<div class="span">暴幸命增伤：<span></span>
			</div>
			<button class="btn three-d free">计算</button>
			<div class="span">韧守闪免伤：<span></span>
			</div>
			<footer>注：由于浏览器精度不够，会进行四舍五入产生偏差<br>若增伤免伤中出现特殊符号e,此时数据有误差</footer>
			<a target="_blank" href="https://my.4399.com/forums/thread-63512387-pid-740811744">使用说明</a>
		</div>
	</body>
	<script>
		let oGrade = document.querySelector('.grade');
		let oResistance = document.querySelector('.resistance');
		let oGrades = document.querySelector('.grades');
		let oResistances = document.querySelector('.resistances');
		let oLine = document.querySelectorAll('.line');
		let oLines = document.querySelectorAll('.lines');
		let oReverse = document.querySelectorAll('.reverse');
		let oMiss = document.querySelector('.miss');
		let oHit = document.querySelector('.hit');
		let oCrit = document.querySelector('.crit');
		let oCrits = document.querySelector('.crits');
		oResistance.innerText = "";
		oResistances.innerText = "";
		
		//己方抗值
		oGrade.onblur = function() {
			let g = oGrade.value - 0;
			let a = ((g * g) + (21 * g) + 68 - ((g + 5) % 6) * (g + 4)) * 25 / 48;
			if (g > 99) {
				a = 1.12 * a;
			}
			console.log(a*5);
			oResistance.innerText = (a * 5).toFixed(3);
		}
		//敌方抗值
		oGrades.onblur = function() {
			let g = oGrades.value - 0;
			let a = ((g * g) + (21 * g) + 68 - ((g + 5) % 6) * (g + 4)) * 25 / 48;
			if (g > 99) {
				a = 1.12 * a;
			}
			oResistances.innerText = (a * 5).toFixed(3);
		}
		//己方暴击幸运属性
		oLine.forEach(function(item) {
			let own = item.children[0].children[1];
			let enemy = item.children[1].children[1];
			let battle = item.children[2].children[1];
			own.onblur = function() {
				if (oResistance.innerText === "" || oResistances.innerText === "") {
					alert('请先输入敌我等级！');
					return;
				}
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				let owncrit;
				let enemytough;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (owncrit - enemytough) + "%";

				if (battle.value === NaN) {
					battle.value = 0 + "%";
				}

				if (owncrit - enemytough > 1) {
					battle.value = "100%";
				}
				if (owncrit - enemytough < -1) {
					battle.value = "-100%";
				}
				let crit = oCrits.value.slice(0, -1) - 0;

				if (battle == oCrits) {
					if (crit <= 0) {
						oCrits.value = 0 + "%";
					}
				}
			}
			enemy.onblur = function(e) {
				if (oResistance.innerText === "" || oResistances.innerText === "") {
					alert('请先输入敌我等级！');
					return;
				}
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				let owncrit;
				let enemytough;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (owncrit - enemytough) + "%";
				if (battle.value == "NaN" || battle.value == "NaN%") {
					battle.value = 0 + "%";
				}
				if (owncrit - enemytough > 1) {
					battle.value = "100%";
				}
				if (owncrit - enemytough < -1) {
					battle.value = "-100%";
				}
				let crit = oCrits.value.slice(0, -1) - 0;

				if (battle == oCrits) {
					if (crit <= 0) {
						oCrits.value = 0 + "%";
					}
				}
			}
		})
		//敌方暴击幸运属性
		oReverse.forEach(function(item) {
			let own = item.children[0].children[1];
			let enemy = item.children[1].children[1];
			let battle = item.children[2].children[1];
			own.onblur = function() {
				if (oResistance.innerText === "" || oResistances.innerText === "") {
					alert('请先输入敌我等级！');
					return;
				}
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				let owncrit;
				let enemytough;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (enemytough - owncrit) + "%";
				if (battle.value === NaN) {
					battle.value = 0 + "%";
				}

				if (enemytough - owncrit > 1) {
					battle.value = "100%";
				}
				if (enemytough - owncrit < -1) {
					battle.value = "-100%";
				}
				let crit = oCrit.value.slice(0, -1) - 0;

				if (battle == oCrit) {
					if (crit <= 0) {
						oCrit.value = 0 + "%";
					}
				}
			}
			enemy.onblur = function(e) {
				if (oResistance.innerText === "" || oResistances.innerText === "") {
					alert('请先输入敌我等级！');
					return;
				}
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				let owncrit;
				let enemytough;
				let crit;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (enemytough - owncrit) + "%";
				if (battle.value == "NaN" || battle.value == "NaN%") {
					battle.value = 0 + "%";
				}
				if (enemytough - owncrit > 1) {
					battle.value = "100%";
				}
				if (enemytough - owncrit < -1) {
					battle.value = "-100%";
				}
				crit = oCrit.value.slice(0, -1) - 0;

				if (battle == oCrit) {
					if (crit <= 0) {
						oCrit.value = 0 + "%";
					}
				}
			}
		})
		//命中闪避
		oLines.forEach(function(item) {
			let own = item.children[0].children[1];
			let enemy = item.children[1].children[1];
			let battle = item.children[2].children[1];
			own.onblur = function() {
				if (oResistance.innerText === "" || oResistances.innerText === "") {
					alert('请先输入敌我等级！');
					return;
				}
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				//己方闪避
				let owncrit;
				let enemytough;
				let crit;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				let abs = 1 + Math.abs(owncrit - enemytough);
				battle.value = (100 * (owncrit - enemytough) / abs) + "%";
				if (battle.value === NaN) {
					battle.value = 0;
				}
				miss = oMiss.value.slice(0, -1) - 0;
				hit = oHit.value.slice(0, -1) - 0;
				if (battle == oMiss) {
					if (miss <= 0) {
						oMiss.value = 0 + "%";
					}
				}
				if (battle == oHit) {
					if (hit >= 0) {
						oHit.value = 100 + "%";
					}
					if (hit < 0) {
						oHit.value = (100 + hit) + "%";
					}
				}
			}
			enemy.onblur = function(e) {
				if (oResistance.innerText === "" || oResistances.innerText === "") {
					alert('请先输入敌我等级！');
					return;
				}
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				let owncrit;
				let enemytough;
				let crit;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				let abs = 1 + Math.abs(owncrit - enemytough);
				battle.value = (100 * (owncrit - enemytough) / abs) + "%";
				if (battle.value === NaN) {
					battle.value = 0;
				}
				miss = oMiss.value.slice(0, -1) - 0;
				hit = oHit.value.slice(0, -1) - 0;
				if (battle == oMiss) {
					if (miss <= 0) {
						oMiss.value = 0 + "%";
					}
				}
				if (battle == oHit) {
					if (hit >= 0) {
						oHit.value = 100 + "%";
					}
					if (hit < 0) {
						oHit.value = (100 + hit) + "%";
					}
				}
			}
		})

		function refresh() {
			//己方暴击幸运属性
			if (oResistance.innerText === "" || oResistances.innerText === "") {
				alert('请先输入敌我等级！');
				return;
			}
			oLine.forEach(function(item) {
				let own = item.children[0].children[1];
				let enemy = item.children[1].children[1];
				let battle = item.children[2].children[1];


				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				let owncrit;
				let enemytough;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (owncrit - enemytough) + "%";

				if (battle.value === NaN) {
					battle.value = 0 + "%";
				}

				if (owncrit - enemytough > 1) {
					battle.value = "100%";
				}
				if (owncrit - enemytough < -1) {
					battle.value = "-100%";
				}
				let crit = oCrits.value.slice(0, -1) - 0;

				if (battle == oCrits) {
					if (crit <= 0) {
						oCrits.value = 0 + "%";
					}
				}
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (owncrit - enemytough) + "%";
				if (battle.value == "NaN" || battle.value == "NaN%") {
					battle.value = 0 + "%";
				}
				if (owncrit - enemytough > 1) {
					battle.value = "100%";
				}
				if (owncrit - enemytough < -1) {
					battle.value = "-100%";
				}

				if (battle == oCrits) {
					if (crit <= 0) {
						oCrits.value = 0 + "%";
					}
				}

			})
			//敌方暴击幸运属性
			oReverse.forEach(function(item) {
				let own = item.children[0].children[1];
				let enemy = item.children[1].children[1];
				let battle = item.children[2].children[1];
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				let owncrit;
				let enemytough;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (enemytough - owncrit) + "%";
				if (battle.value === NaN) {
					battle.value = 0 + "%";
				}

				if (enemytough - owncrit > 1) {
					battle.value = "100%";
				}
				if (enemytough - owncrit < -1) {
					battle.value = "-100%";
				}
				let crit = oCrit.value.slice(0, -1) - 0;

				if (battle == oCrit) {
					if (crit <= 0) {
						oCrit.value = 0 + "%";
					}
				}
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				battle.value = 100 * (enemytough - owncrit) + "%";
				if (battle.value == "NaN" || battle.value == "NaN%") {
					battle.value = 0 + "%";
				}
				if (enemytough - owncrit > 1) {
					battle.value = "100%";
				}
				if (enemytough - owncrit < -1) {
					battle.value = "-100%";
				}
				crit = oCrit.value.slice(0, -1) - 0;

				if (battle == oCrit) {
					if (crit <= 0) {
						oCrit.value = 0 + "%";
					}
				}

			})
			//命中闪避
			oLines.forEach(function(item) {
				let own = item.children[0].children[1];
				let enemy = item.children[1].children[1];
				let battle = item.children[2].children[1];
				let ownnum = oResistance.innerText - 0;
				let enemynum = oResistances.innerText - 0;
				//己方闪避
				let owncrit;
				let enemytough;
				let crit;
				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				let abs = 1 + Math.abs(owncrit - enemytough);
				battle.value = (100 * (owncrit - enemytough) / abs) + "%";
				if (battle.value === NaN) {
					battle.value = 0;
				}
				miss = oMiss.value.slice(0, -1) - 0;
				hit = oHit.value.slice(0, -1) - 0;
				if (battle == oMiss) {
					if (miss <= 0) {
						oMiss.value = 0 + "%";
					}
				}
				if (battle == oHit) {
					if (hit >= 0) {
						oHit.value = 100 + "%";
					}
					if (hit < 0) {
						oHit.value = (100 + hit) + "%";
					}
				}

				if (own.value >= 0) {
					owncrit = own.value / enemynum;
				}
				if (own.value < 0) {
					owncrit = own.value / ownnum;
				}
				if (enemy.value >= 0) {
					enemytough = enemy.value / ownnum;
				}
				if (enemy.value < 0) {
					enemytough = enemy.value / enemynum;
				}
				abs = 1 + Math.abs(owncrit - enemytough);
				battle.value = (100 * (owncrit - enemytough) / abs) + "%";
				if (battle.value === NaN) {
					battle.value = 0;
				}
				miss = oMiss.value.slice(0, -1) - 0;
				hit = oHit.value.slice(0, -1) - 0;
				if (battle == oMiss) {
					if (miss <= 0) {
						oMiss.value = 0 + "%";
					}
				}
				if (battle == oHit) {
					if (hit >= 0) {
						oHit.value = 100 + "%";
					}
					if (hit < 0) {
						oHit.value = (100 + hit) + "%";
					}
				}

			})
		};

		//增伤
		let oIncrease = document.querySelector('.increase');
		oIncrease.onclick = function() {
			refresh();
			let dodge = document.querySelectorAll('.ate');
			let oSpan = document.querySelectorAll('span')[20];
			let enmiss = dodge[16].value / oResistance.innerText;
			let endge = 1 - (enmiss / (1 + enmiss));
			let owct = dodge[2].value.slice(0, -1) / 100;
			let owly = dodge[5].value.slice(0, -1) / 100;
			let owhit = dodge[17].value.slice(0, -1) / 100;
			//最终伤害
			let fina = (1 + owct + owct * owly) * owhit;
			let end = (100 * ((fina / endge) - 1)) + "%";
			oSpan.innerText = end;
		}
		//免伤//enctenly必须输入正常数值
		let oFree = document.querySelector('.free');
		oFree.onclick = function() {
			refresh();
			let dodge = document.querySelectorAll('.ate');
			let oSpan = document.querySelectorAll('span')[21];
			let enct = dodge[7].value / oResistance.innerText;
			let enly = dodge[10].value / oResistance.innerText;
			//敌方最大伤害
			if (enct > 1) {
				enct = 1;
			}
			if (enct < -1) {
				enct = -1;
			}
			if (enly > 1) {
				enly = 1;
			}
			if (enly < -1) {
				enly = -1;
			}
			let enhurt = 1 + enct + enct * enly;
			let encts = dodge[8].value.slice(0, -1) / 100;
			let enlys = dodge[11].value.slice(0, -1) / 100;
			let owmiss = dodge[14].value.slice(0, -1) / 100;
			let enhurts = (1 + encts + encts * enlys) * (1 - owmiss);
			let end = (100 * (enhurt - enhurts) / enhurt) + "%";
			oSpan.innerText = end;
		}
	</script>
</html>
